import { useState, useDeferredValue } from "react";
import PropTypes from "prop-types";
function expensiveSearch(deferredQuery) {
  return Array(20000)
    .fill(0)
    .map((_, index) => `Result ${index} for ${deferredQuery}`);
}
function SearchResults({ results }) {
  return (
    <ul>
      {results.map((result, index) => (
        <li key={index}>{result}</li>
      ))}
    </ul>
  );
}
SearchResults.propTypes = {
  results: PropTypes.array.isRequired,
};
function App() {
  //定义搜索查询状态  优先级高
  const [query, setQuery] = useState("");
  //使用useDeferredValue创建延迟更新的查询值 优先级低， 要 query 不更新后，他才会更新
  const deferredQuery = useDeferredValue(query);
  const searchResults = expensiveSearch(deferredQuery);
  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <SearchResults results={searchResults} />
    </div>
  );
}
export default App;
